<template>
    <div>
        <van-nav-bar
                title="分类"
                left-arrow
                :fixed="true"
                class="my-nav"
                @click-left="onClickLeft"
                @click-right="onClickRight"
        >
            <van-icon name="search" slot="right"/>
        </van-nav-bar>
        <div>
            <van-row style="font-size: 14px; ">
                <van-col span="6"
                         style="border-right: 1px solid #efefef;  padding-top: 46px;  position: absolute; height: 100%">
                    <van-cell
                            v-for="item in list"
                            :key="item.id"
                            :title="item.name"
                            @click="onClickCategory(item)"
                    />
                </van-col>
                <van-col span="18"
                         style=" position: absolute; padding-top: 46px; margin-left: 25%; padding-right: 20px; height: 100%;padding-left: 20px">
                    <div class="demo_line" v-text="title">智能机</div>
                    <div class="span">
                        <ul>
                            <li v-for="item in brands" :key="item.id" v-text="item.name" @click="onSearch(item)">荣耀</li>
                        </ul>
                    </div>
                </van-col>
            </van-row>
        </div>
    </div>
</template>

<script>
  import {listCategory, listBrands} from '../../api/classification'

  export default {
    data() {
      return {
        title: '',
        list: [],
        brands: []
      };
    },
    mounted() {
      listCategory(d => {
        this.list = d;
        if (d) {
          this.onClickCategory(d[0]);
        }
      })
    },
    methods: {
      onClickCategory(item) {
        this.title = item.name;
        listBrands(item.id, brands => {
          this.brands = brands
        })
      },
      onSearch(brand) {
        this.$router.push({path:'search', query: {brandId: brand.id}});
      },
      onClickLeft() {
        this.$router.back(-1)
      },
      onClickRight() {
        this.$router.push('search');
      }
    }
  }
</script>

<style lang="less" scoped>
    .demo_line {
        padding: 0 20px 0;
        margin: 20px 0;
        line-height: 1px;
        border-left: 60px solid #ddd;
        border-right: 60px solid #ddd;
        text-align: center;
    }

    .span {
        ul {
            list-style: none;
            li {
                height: 36px;
                line-height: 36px;
                box-sizing: border-box;
                display: inline-block;
                margin: 8px;
                padding: 0 15px;
                background: #eee;
                border-radius: 18px;
            }
        }
    }
</style>